<template>
  <div class="chatList">
    <ul>
      <template v-for="(item, index) in props.chatInfo">
        <!-- 左侧 -->
        <li :key="index" v-if="props.id == item.send_id">
          <div class="left">
            <img :src="item.send_avatar" alt="" />
          </div>
          <div class="right">
            <p class="time">10:23:45</p>
            <p class="content">
              {{ item.message }}
              <span class="sanjiao"></span>
            </p>
          </div>
        </li>
        <!-- 右侧 -->
        <li class="r" :key="index" v-if="item.send_id == userId">
          <div class="right">
            <p class="time">10:25:46</p>
            <p class="content">
              {{ item.message }}
              <span class="sanjiao"></span>
            </p>
          </div>
          <div class="left">
            <img :src="item.send_avatar" alt="" />
          </div>
        </li>
      </template>
    </ul>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps({
    chatInfo: Array<{
      [x: string]: string | undefined;
    }>,
    id: String,
    userId: String,
  });
</script>

<style lang="scss" scoped>
  .chatList {
    ul {
      padding: 10px 0;
      box-sizing: border-box;

      li {
        display: flex;
        margin-bottom: 40px;

        .left {
          width: 92px;
          height: 92px;
          margin-right: 16px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .right {
          flex: 1;

          p {
            margin: 0;
          }

          p.time {
            font-size: 24px;
            margin-bottom: 8px;
          }

          p.content {
            font-size: 28px;
            background: #fff;
            padding: 12px;
            border-radius: 8px;
            color: #333;
            display: inline-block;
            position: relative;
            max-width: 80%;

            span {
              position: absolute;
              left: -18px;
              top: 4px;
              border: 10px solid transparent;
              border-right-color: #fff;
            }
          }
        }
      }

      li.r {
        p.time {
          text-align: right;
        }

        p.content {
          background: #6bd81d;
          text-align: left;
          position: relative;
          color: #333;
          span {
            position: absolute;
            left: 99.6%;
            top: 4px;
            height: 0;
            border: 10px solid transparent;
            border-left-color: #6bd81d;
          }
        }

        .left {
          margin-left: 16px;
          margin-right: 0;
        }

        .right {
          text-align: right;
        }
      }
    }
  }
</style>
